﻿<!--
 * @Author: halande
 * @Date: 2021-04-09 19:09:28
 * @LastEditTime: 2021-05-12 15:33:20
 * @LastEditors: Please set LastEditors
 * @Description: 图文导航组件，交互逻辑比较复杂，采用extends的方式重构了滑动相关的函数
 * @FilePath: /lego-nuxt/components/modules/NavigateModule/index.vue
-->
<template>
  <div
    class="navigate-module"
    :style="{
      'background-color': pageData.bgColor,
      'padding-left': pageData.leftRightPad + 'px',
      'padding-right': pageData.leftRightPad + 'px',
      'padding-top': pageData.upDownPad + 'px',
      'padding-bottom': pageData.upDownPad + 'px',
    }"
  >
    <div :id="componentId + '_section'" class="section">
      <div class="onescreen">
        <div
          v-for="(item, index) in imageList1"
          :key="item._id"
          class="imgdiv"
          :style="{
            width: 100 / pageData.navNumPerRow + '%',
            'margin-top': gutterBetweenRows(index),
          }"
        >
          <div class="imgblock">
            <img
              :id="'img_' + item._id"
              :style="{
                'border-radius': getRadius,
                width: pageData.imageSize + '%',
              }"
              :src="cdnConvert(item.image)"
              @click="navigateTo(item, index)"
              @load="loadImage(item, index)"
            />
          </div>
          <div
            v-if="item.title && pageData.showTitle !== 'N'"
            class="titlediv"
            :style="{
              color: pageData.textColor,
              'font-size': pageData.textSize + 'px',
            }"
          >
            {{ item.title }}
          </div>
        </div>
      </div>

      <div v-if="pageData.screenNum === 2" class="twoscreen">
        <div
          v-for="(item, index) in imageList2"
          :key="item._id"
          class="imgdiv"
          :style="{
            width: 100 / pageData.navNumPerRow + '%',
            'margin-top': gutterBetweenRows(index),
          }"
        >
          <div class="imgblock">
            <img
              :id="'img_' + item._id"
              :style="{
                'border-radius': getRadius,
                width: pageData.imageSize + '%',
              }"
              :src="cdnConvert(item.image)"
              @click="navigateTo(item, index)"
              @load="loadImage(item, index)"
            />
          </div>
          <div
            v-if="item.title"
            class="titlediv"
            :style="{
              color: pageData.textColor,
              'font-size': pageData.textSize + 'px',
            }"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>

    <div v-if="imageList2.length > 0" class="indicator">
      <div
        :class="{
          selected: indicatorIndex === 1,
          unselect: indicatorIndex === 2,
        }"
      ></div>
      <div
        style="margin-left: 5px"
        :class="{
          selected: indicatorIndex === 2,
          unselect: indicatorIndex === 1,
        }"
      ></div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import tool from '@/util/tool'
import tracks from './tracks'
import NavigateModuleExtends from './navigateModule.extends'

export default {
  name: 'NavigateModule',
  extends: NavigateModuleExtends,
  props: {
    componentId: {
      type: String,
      required: true
    },
    activityCode: {
      type: String,
      required: true
    },
    ruleContents: {
      type: Array,
      required: false,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      indicatorIndex: 1,
    }
  },
  computed: {
    ...mapGetters('main', ['pageContent']),
    pageData () {
      let model = this.pageContent.componentList.find(
        (a) => a._id === this.componentId
      )
      return { ...model }
    },
    imageList1 () {
      let tempList = JSON.parse(JSON.stringify(this.pageData.imageList))
      let result = []
      if (this.pageData.screenNum === 1) {
        result = this.pageData.imageList
      } else {
        let len = this.pageData.rowNum * this.pageData.navNumPerRow
        result = tempList.splice(0, len)
      }

      // 子项人群规则
      if (this.ruleContents && this.ruleContents.length > 0) {
        let hideList = this.ruleContents
          .filter((a) => !a.hit)
          .map((a) => a.elementCode)
        result = result.filter((a) => !hideList.includes(a._id))

        if (this.pageData.placeholder &&
          this.pageData.placeholder.image &&
          this.pageData.screenNum === 1 &&
          this.pageData.navNumPerRow === 2 &&
          this.pageData.rowNum === 2
        ) {
          // 对于122布局
          if (result.length % 2 !== 0) {
            result.push(this.pageData.placeholder)
          }
        }

      }
      return result
    },
    imageList2 () {
      let tempList = JSON.parse(JSON.stringify(this.pageData.imageList))
      if (this.pageData.screenNum === 1) {
        return []
      }

      let start = this.pageData.rowNum * this.pageData.navNumPerRow
      let result = tempList.splice(start, start)

      // 子项人群规则
      if (this.ruleContents && this.ruleContents.length > 0) {
        let hideList = this.ruleContents
          .filter((a) => !a.hit)
          .map((a) => a.elementCode)
        result = result.filter((a) => !hideList.includes(a._id))
      }
      return result
    },
    getRadius () {
      if (this.pageData.radius === 0) {
        return null
      }
      return this.pageData.radius_value + 'px'
    },
  },
  mounted () {
    tracks.initQdas(this)

    this.$nextTick(() => {
      let node = document.getElementById(this.componentId + '_section')

      import('@/util/scrollEvent').then((res) => {
        res.default(
          node,
          this.onLeftScroll,
          this.onRightScroll,
          this.onOtherScroll
        )
      })
    })
  },
  methods: {
    ...mapMutations('main', ['editComponent']),
    cdnConvert (path) {
      // 如果是服务端渲染，直接return；如果path为空，取默认图片
      if (process.server) return
      if (!path) return '/images/common/default.png'
      return `${path}`
    },
    gutterBetweenRows (index) {
      if (this.pageData.navNumPerRow === 2 && index > 1) {
        return this.pageData.rowGutter + 'px'
      } else if (this.pageData.navNumPerRow === 3 && index > 2) {
        return this.pageData.rowGutter + 'px'
      } else if (this.pageData.navNumPerRow === 4 && index > 3) {
        return this.pageData.rowGutter + 'px'
      } else if (this.pageData.navNumPerRow === 5 && index > 4) {
        return this.pageData.rowGutter + 'px'
      } else {
        return '0px'
      }
    },
    navigateTo (item, index) {
      tracks.clickQdas(item, index, this)

      if (!item.link) {
        return
      }
      // if (tool.isProductDetailPage(item.link)) {
      //   let spuNo = tool.getSpuNoFromLink(item.link)
      //   tool.navigateToProductDetail({ spuNo: spuNo })
      // } else {
      tool.navigateTo(item.link)
      // }
    },
    loadImage (item, index) {
      tracks.imgLoadQdas(item, index, this)
    }
  }
}
</script>
<style lang="less" scope>
.navigate-module {
  .indicator {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    padding-bottom: 5px;
  }

  .selected {
    background-color: #000000;
    width: 20px;
    height: 6px;
    border-radius: 5px;
  }
  .unselect {
    background-color: #c5c5c5;
    width: 10px;
    height: 6px;
    border-radius: 5px;
  }

  .section {
    display: flex;
    overflow: hidden;
    overflow-x: auto;
  }

  .section::-webkit-scrollbar {
    display: none;
  }
  .onescreen {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex: 1;
    min-width: 100%;
  }

  .twoscreen {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    min-width: 100%;
  }

  .imgdiv {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .imgblock {
    display: flex;
    justify-content: center;
  }
  .titlediv {
    margin-top: 3px;
    font-size: 14px;
  }
  img {
    display: block;
    height: 100%;
  }
}
</style>
